<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cyh2</title>
    <script src="font/iconfont.js"></script>
    <style>
        body,h2,ul,p{
            margin: 0;
            padding: 0;
        }
         .title{
            width: 100%;
            height: 150px;
            display: flex;
            position: fixed;
            z-index: 3;
            top: 0px;
            background-color: #fff;
        }
        .title_s{
            position: relative;
            left: 20px;
            width: 60px;
        }
        .title h2{
            position: relative;
            top: 40px;
            left: 390px;
            font-size: 50px;
        }
        .title_j{
            position: relative;
            right: -730px;
            width: 60px;
        }
        .second{
            margin-top: 150px;
            background-color: rgb(245,246,248);
            height: 160px;
        }
        .wh{
            position: relative;
            top: 35px;
            left: 40px;
            background-color: #fff;
            width: 900px;
            height: 85px;
            border-radius: 43px;
        }
        .title_ss{
            position: relative;
            left: 330px;
            bottom: 25px;
            width: 60px;
        }
        .second p{
            position: absolute;
            bottom: 20px;
            left: 420px;
            font-size: 35px;
            color: rgb(153, 153, 153);
            opacity: .5;
        } 
        .last{
            background-color: rgb(245,246,248);
            
        }
        a{
            text-decoration: none;
            color: #000;
        }
        .last li{
            margin-left: 40px;
            display: flex;
            margin-bottom: 50px;
        }
        .white{
            width: 900px;
            height: 180px;
            display: flex;
            background-color: #fff;
            border-radius: 25px;
        }
        .icon{
            margin-left: 30px;
            width: 110px;
        }
        .test{
            margin-left: 30px;
            margin-top: 40px;
          font-size: 40px;
          width: 800px;
        }
        .test .p2{
            margin-top: 5px;
            font-size: 30px;
            color: rgb(161, 161, 161);
        }
        .icon_jt{
            width: 45px;
        }
        .test .p{
            margin-top: 20px;
        }
        .daodi{
            height: 30px;
            background-color: rgb(245,246,248);
        }
        .daodi h3{
            text-align: center;
           color: rgb(210, 214, 217);
        }
    </style>
</head>
<body>
    <div class="title">
        <div class="jt">
            <a href="project1-index.html">
                <svg class="title_s" aria-hidden="true">
                    <use xlink:href="#icon-zuojiantou"></use>
                </svg>
            </a>
        </div>
        <h2>课程</h2>
        <div class="jiahao">
            <a href="#">
                <svg class="title_j" aria-hidden="true">
                    <use xlink:href="#icon-jiahao"></use>
                </svg>
            </a>
        </div>
    </div>
    <div class="second">
            <a href="#">
                <div class="wh">
                    <svg class="title_ss" aria-hidden="true">
                        <use xlink:href="#icon-sousuo"></use>
                    </svg>
                    <p>搜索</p>
                </div>
            </a>
        </div>

        <div class="last">
            <a href="#">
                    <li>
                        <div class="white">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gailv"></use>
                        </svg>
                        <div class="test">
                            <p class="p1">概率论与数理统计Ⅱ</p>
                            <p class="p2">王欣</p>
                        </div>
                        <svg class="icon_jt" aria-hidden="true">
                            <use xlink:href="#icon-jiantou"></use>
                        </svg>
                    </div>
                    </li>
                
                
            </a>
           
                <a href="#">
                    <li>
                        <div class="white">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-wuli"></use>
                            </svg>
                            <div class="test">
                                <p class="p1">大学物理</p>
                                <p class="p2">翟卫东</p>
                            </div>
                            <svg class="icon_jt" aria-hidden="true">
                                <use xlink:href="#icon-jiantou"></use>
                            </svg>
                        </div>
                        
                    </li>
                </a>
           
            <a href="#">
                <li>
                    <div class="white">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-jindaishi"></use>
                        </svg>
                        <div class="test">
                            <p class="p1">中国近代史纲要</p>
                            <p class="p2">思政部</p>
                        </div>
                        <svg class="icon_jt" aria-hidden="true">
                            <use xlink:href="#icon-jiantou"></use>
                        </svg>
                    </div>
                </li>
            </a>
            
           
                <a href="#">
                    <li>
                        <div class="white">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tiyuke"></use>
                            </svg>
                            <div class="test">
                                <p class="p1">体育(二)</p>
                                <p class="p2">宋英</p>
                            </div>
                            <svg class="icon_jt" aria-hidden="true">
                                <use xlink:href="#icon-jiantou"></use>
                            </svg>
                        </div>
                       
                    </li>
                </a>
          
            
       
                <a href="#">
                    <li>
                        <div class="white">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-gaodengshuxue"></use>
                            </svg>
                            <div class="test">
                                <p class="p1">高等数学Ⅱ(下)</p>
                                <p class="p2">王玉军</p>
                            </div>
                            <svg class="icon_jt" aria-hidden="true">
                                <use xlink:href="#icon-jiantou"></use>
                            </svg>
                        </div>
                        
                    </li>
                </a>
      
            
         
                <a href="#">
                    <li>
                        <div class="white">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-wuli"></use>
                            </svg>
                            <div class="test">
                                <p class="p1">常月华</p>
                                <p class="p2">19001011027</p>
                            </div>
                            <svg class="icon_jt" aria-hidden="true">
                                <use xlink:href="#icon-jiantou"></use>
                            </svg>
                        </div>
                        
                    </li>
                </a>
       
            
         
                <a href="#">
                    <li>
                        <div class="white">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-makesi"></use>
                            </svg>
                            <div class="test">
                                <p class="p1">马克思主义基本原理概论</p>
                                <p class="p2">思政部</p>
                            </div>
                            <svg class="icon_jt" aria-hidden="true">
                                <use xlink:href="#icon-jiantou"></use>
                            </svg>
                        </div>
                        
                        
                    </li>
                </a>
       
            
            
                <a href="#">
                    <li>
                        <div class="white">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-tushuguan"></use>
                            </svg>
                            <div class="test">
                                <p class="p1">大连东软信息学院入馆教育</p>
                                <p class="p2">图书馆</p>
                            </div>
                            <svg class="icon_jt" aria-hidden="true">
                                <use xlink:href="#icon-jiantou"></use>
                            </svg>
                        </div>
                        
                    </li>
                </a>

                <a href="#">
                    <li>
                        <div class="white">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-jieshu"></use>
                            </svg>
                            <div class="test">
                                <p class="p">已结束课程</p>
                            </div>
                            <svg class="icon_jt" aria-hidden="true">
                                <use xlink:href="#icon-jiantou"></use>
                            </svg>
                        </div>
                        
                    </li>
                </a>

                <div class="daodi">
                    <h3>已经到底啦~(>_<)~~</h3>
                </div>
            </div>
            
            

        
</body>
</html>